<template>
  <view class="container">
    <text>我的收益</text>
    <view class="type">
      <radio-group @change="type_change">
        <label v-for="(item, index) in type_list" :key="index">
          <radio :value="item.value" :checked="item.checked" style="transform: scale(0.6)" />
          {{ item.name }}
        </label>
      </radio-group>
    </view>
    <view class="card">
      <uni-card v-for="(item, index) in paymentList" :key="index" :title="item.add_date">
        <view class="card_content">
          <text class="card_item">库币：{{ stylePaymentAmount(item.operator, item.point_amount) }}</text>
          <text class="card_item">项目：{{ item.remarks }}</text>
        </view>
      </uni-card>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { PaymentItem, SelectTypeItem } from '@/types/home'
import { getMyPaymentListAPI } from '@/services/home'
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'

// 获取会员信息
let memberStore = reactive<any>({})
memberStore = useMemberStore()
const paymentList = ref<PaymentItem[]>([])
const state = reactive({
  payment_type: 'both',
  page: 1,
  size: 10,
  total: 1,
})
let type_list = ref<SelectTypeItem[]>([
  { name: '全部', value: 'both', checked: true },
  { name: '收入', value: 'income', checked: false },
  { name: '支出', value: 'expense', checked: false },
])
const stylePaymentAmount = (operator: number, point_amount: number) => {
  let myself_id: number = parseInt(memberStore.profile.id)
  if (operator == myself_id) {
    return '-' + point_amount.toFixed(1).toString()
  } else {
    return '+' + point_amount.toFixed(1).toString()
  }
}
// 收支方式改变了，切换到该页面或tarbar，根据选择的值判断
const type_change = (e: any) => {
  // console.log('学科改变：', e.target.value)
  state.page = 1
  state.total = 0
  state.payment_type = e.target.value
  getMyPaymentLogData()
}
// 获取收支情况
const getMyPaymentLogData = async () => {
  console.log('要发送收支请求了')
  let params_data = { page: state.page, size: state.size, payment_type: state.payment_type }
  let res = await getMyPaymentListAPI(params_data)
  console.log('获取收支结果：', res)
  if (res.code == 200) {
    paymentList.value = res.data.results
    state.total = res.total
  } else {
    console.log('获取收支失败', res.message)
    uni.showToast({ icon: 'error', title: '获取收支记录失败' })
  }
}
// 新增收支情况，用于触底
const addMyPaymentLogData = async () => {
  if (paymentList.value.length >= state.total) {
    uni.showToast({ icon: 'error', title: '没有更多收支了' })
    return 0
  }
  let params_data = { page: state.page + 1, size: state.size, payment_type: state.payment_type }
  let res = await getMyPaymentListAPI(params_data)
  console.log('获取收支结果：', res)
  if (res.code == 200) {
    state.page += 1
    paymentList.value.push(...res.data.results)
    state.total = res.total
  } else {
    console.log('获取收支失败', res.message)
    uni.showToast({ icon: 'error', title: '获取收支记录失败' })
  }
}
// 页面加载
onLoad(() => {
  console.log('income页面初始化')
  getMyPaymentLogData()
})
// 自定义下拉刷新被触发
onReachBottom(async () => {
  console.log('触底，要发送添加记录')
  await Promise.all([addMyPaymentLogData()])
  // 停止页面加载动画
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
</script>

<style lang="scss">
.card .card_content .card_item {
  display: flex;
  flex-flow: column wrap;
  justify-content: left;
}
</style>